<template>
  <div class="search">
      <!--步骤四：letter传递给content-->
      <search-content :findList2="findList2" ></search-content>
       <!--步骤二：组件监听change事件，绑定方法-->
      <search-list :findList2="findList2" :letter="letter"></search-list>
      <search-alphabet :alphabetList="alphabetList" :findList2="findList2" @change="handleLetterChange"></search-alphabet>
  </div>
</template>

<script>
import axios from 'axios'
import SearchContent from './components/searchContent'
import SearchList from './components/searchList'
import SearchAlphabet from './components/SearchAlphabet'
export default {
  name: 'Search',
  data () {
    return {
        findList2:{},
        // 步骤五：接收letter
        letter: '',
        alphabetList:[]
    }
  },
  components:{
    SearchContent,
    SearchList,
    SearchAlphabet
  },
  mounted(){
    this.getHomeInfo()
  },
  methods:{
    getHomeInfo(){
        // axios返回的结果是一个promise对象
        axios.get('/shopping_mall/index.php/Home/Find/index').then(
        // 注意：这里绝对不可以写成this.getHomeInfoSucc（），否则请求的结果会是undefined
        this.getHomeInfoSucc
      )
    },
    getHomeInfoSucc(res){
        // console.log(res)
        res = res.data 
        // console.log(res)
        if(res.ret && res.data){
          this.findList2 = res.data.findList2
          this.alphabetList = res.data.alphabetList
        }
    },
    // 步骤三：接收参数letter，转化给List组件
    handleLetterChange(letter){
        // console.log(letter)
        this.letter = letter
    },
  }
}
</script>


<style lang="stylus" scoped>
.search
    background-color #efefef
</style>
